<template>
  <div>
    <div class="dingbu_xiazhu">
      <div class="display_sw">
        <div class="home_left">
          <span @click="touzhu1" :class="{bottom_border:isbottom}">我要投注</span>
          <span @click="touzhu2" :class="{bottom_border2:isbottom2}">投注记录</span>
        </div>

        <p class="home_you_fz">余额：{{user_info.wallet}}
           <i class="icon_flush" @click="updateWallet"></i>
        </p>
      </div>
    </div>
    <!--这是五星复式的我要投注的内容-->
    <gameInfo :credit="true" @completeCount="completeCount"></gameInfo>
    <div class="longhu_box" v-if="qiehuan1">
      <ul class="zhenghe_ul_box wuzhongyi">
        <li class="zhenghe_li">
          <wanfa @getActiveData="getActiveData" ref="wanfa"></wanfa>
        </li>
      </ul>
      <creditFooter
        @addCart="addCart"
        @randomConfirm="randomConfirm"
        @handlerSubmitNow="handlerSubmitNow"
        ref="footer"
      />
       <!--下注弹出密码框-->
      <!--<van-dialog
        v-model="isShowPasswordDialog"
        title="温馨提示"
        show-cancel-button
        @cancel="passwordDialogClose"
        @confirm="passwordDialogConfirm"
      >
        <div class="jiaoyi_div">
          <p class="jiaoyi_tishi_p">是否确认下注，确认请输入交易密码</p>
          <input type="password" class="jiaoyi_input" v-model="deal_pwd" placeholder="请输入交易密码" />
        </div>
      </van-dialog>-->

      <van-dialog v-model="isShowPasswordDialog" message="请确定下注" show-cancel-button @cancel="passwordDialogClose" @confirm="passwordDialogConfirm">
				</van-dialog>
    </div>
    <!--下注弹出密码框-->
    <!--这是五星复式的    投注记录组件的内容-->
    <div class="touzhu_zujian" v-else>
       <touzhujilu :isMultiple="true"></touzhujilu>
    </div>
  </div>
</template>

<script>
import touzhujilu from "../wuxingwanfa/components/touzhujilu";
import creditFooter from "../AComp/creditFooter";
import gameInfo from "../AComp/gameInfo";
import wanfa from "./components/wanfa3";
import { creditFive } from "../../service/api";
import { mapState } from "vuex";
import { randomChip, handlerFilterTextarea } from "../../util/utils";
import _isEmpty from "lodash/isEmpty";
import _random from "lodash/random";
import { Dialog } from "vant";
export default {
  components: {
    touzhujilu,
    creditFooter,
    gameInfo,
    wanfa
  },
  data() {
    return {
      isbottom: true, //我要投注添加class
      isbottom2: false, //投注记录添加class
      qiehuan1: true,
      play_type: "19", //投注记录传值五星复式1

      isShowPasswordDialog: false, //密码弹窗
      deal_pwd: "", //交易密码
      result: [],
      amount_money: ""
    };
  },
  computed: {
    total_number() {
      return this.textareaResult.length;
    },
    // 总价
    total_price() {
      let { total_number, amount_model_price, multiple } = this;
      return total_number * amount_model_price * multiple;
    },
    ...mapState(["user_info", "current_play_type", "bonus_odd"])
  },

  methods: {
    updateWallet(){
      console.log("更新余额")
      this.$store.dispatch("asyncGetUserInfo");
    },
    // {"amount":1,"name":"9","odds":2.2,"parentName":"全5中1","playType":"全5中1"}
    addCart(val) {
      let { result, bonus_odd, current_play_type } = this;
      let money = val;
      let temp = [];
      if (!val) {
        money = null;
      }
      result.forEach(item => {
        let obj = {
          amount: money,
          name: item,
          odds: bonus_odd.wuzhongyi,
          parentName: current_play_type,
          playType: current_play_type
        };
        temp.push(obj);
      });
      this.$store.commit("set_credit_cart", temp);
      this.initData();
      this.$router.push("/credit/xiazhulan");
    },
    getActiveData(val) {
      this.result = val;
    },
    // 立即下注
    handlerSubmitNow(val) {
      if (_isEmpty(this.result)) {
        this.$toast("号码选择不完整, 请重新选择");
        return;
      }
      if (!val) {
        this.$toast("请输入有效金额");
        return;
      }
      this.amount_money = val;
      this.isShowPasswordDialog = true;
    },
    // 提交
    passwordDialogConfirm() {
      let {
        deal_pwd,
        result,
        bonus_odd,
        current_play_type,
        amount_money
      } = this;
//    if (!deal_pwd) {
//      this.$toast("交易密码不能为空");
//      return;
//    }
      let temp = [];
      result.forEach(item => {
        let obj = {
          amount: amount_money,
          name: item,
          odds: bonus_odd.wuzhongyi,
          parentName: current_play_type
        };
        temp.push(obj);
      });
      let params = {
        deal_pwd,
        orderlist: JSON.stringify(temp)
      };
      creditFive(params).then(res => {
        this.initData();
        if (res.data.status_code === 200) {
          this.$toast(res.data.message);
          this.$store.dispatch('asyncGetUserInfo');
          this.passwordDialogClose();
        }
      });
    },
    initData() {
      this.$refs.wanfa.clear();
      this.$refs.footer.clear();
    },
    // 密码框关闭
    passwordDialogClose() {
      this.isShowPasswordDialog = false;
      this.deal_pwd = "";
    },
    completeCount(){
      this.initData();
    },
    // 随机下注
    randomConfirm(nums) {
      let { bonus_odd, current_play_type } = this;
      let temp = [];
      let result = [];
      while (temp.length < nums) {
        temp.push(_random(9));
      }
      temp.forEach(item => {
        let obj = {
          amount: null,
          name: item,
          odds: bonus_odd.wuzhongyi,
          parentName: current_play_type,
          playType: current_play_type
        };
        result.push(obj);
      });
      this.$store.commit("set_credit_cart", result);
      this.initData();
      this.$router.push("/credit/xiazhulan");
    },

    //我要投注
    touzhu1() {
      //this.$router.push("/wuxingfushi");
      this.qiehuan1 = true;
      this.isbottom = true;
      this.isbottom2 = false;
    },
    //投注记录
    touzhu2() {
      //this.$router.push("/fushijilu");
      this.qiehuan1 = false;
      this.isbottom2 = true;
      this.isbottom = false;
    }
  }
};
</script>
<style>
@import url("../../assets/css/ttcp/zhenghe.css");
@import url("../../assets/css/ttcp/wuzhongyi.css");
.jiaoyi_div {
  margin-top: 0.2rem;
}

.jiaoyi_input {
  width: 85%;
  margin: 0.5rem auto;
  display: block;
  border: 2px solid #f5f5f5;
  padding: 0.1rem 0.1rem;
  font-size: 0.3rem;
}

.jiaoyi_tishi_p {
  text-align: center;
  font-size: 0.25rem;
}
/*  */

.xuanze_xiazhu_ul .xuanze_xiazhu_li.red {
  background: #d21d17;
  color: #fff;
  border: none;
}

.xiazhu_chakan_ul .xiazhu_chakan_li .red {
  background: #d21d17;
  color: #fff;
  border: none;
}

.xiazhu_chakan_ul .xiazhu_chakan_li.active {
  background: #d21d17;
}
.xuanze_xiazhu_ul .xuanze_xiazhu_li.red {
  background: #d21d17;
  color: #fff;
  border: none;
}
.bg-tm {
  background: transparent;
}
.wuzhongyi{border-top:1px solid #fff ;}
</style>
